صفحات الأنماط المتعاقبة

الدرس الثالث

كيف تخبر المتصفح بالخط الذي تريد عرضه ؟ أنت فقط تكتب اسم الخط بعد font-family أليس كذلك ؟

لسوء الحظ ، المسألة أكثر تعقيداً من هذا . فالخطوط لا تدعى دائماً بنفس الاسم عبر المنصات المختلفة . على سبيل المثال الخط Courier في ماكنتوش يدعى في ويندوز Courier New . و إذا كانت منصة ما تطلق على الخط المائل Italic فإن هناك منصة أخرى تطلق عليه Oblique . و كلما بحثت أكثر ستجد تضارب أكثر .

و أكثر من ذلك ، فإن الاسم الذي نطلقه على الخط ، قد يكون مختلف عن الاسم الذي يطلقه الحاسب عليه ، مثلاً الخط Brush Script يطلق عليه الحاسب اسم Brush Script MT و يجب أن تتأكد عندما تستدعي خطاً ما أن يكون بنفس الاسم الذي يعرفه به الحاسب و ليس بالاسم الذي تطلقه عليه .

السؤال الآن : كيف تعرف الاسم الذي يطلقه الحاسب على خط ما ؟ الجواب يختلف حسب المنصة التي تعمل عليها :

• مستخدمي ويندوز : استخدموا أسماء الخطوط تماماً كما تظهر في قائمة الخطوط لتطبيق ما ، (مثل مايكروسوفت وورد) .

• مستخدمي ماكنتوش : لا تثقوا في الأسماء التي تخبركم بها قوائم الخطوط في التطبيقات ، بدلاً من ذلك افتحوا مجلد الخطوط Fonts الموجود داخل مجلد النظام System و اكتبوا الأسماء في شفرة صفحات الأنماط كما تجدونها في مجلد الخطوط تماماً .

الخاصية font-family :

font-family هي خاصية من خواص صفحات الأنماط تستخدم لاستدعاء الخطوط بالاسم ، تركيبها الأساسي كالتالي :

H2 { font-family: helvetica, impact, sans-serif }

إليك الطريقة التي يفسر بها المتصفح هذه القاعدة : انظر إلى أول خط في القائمة (helvetica) ، إذا كان هناك خط بنفس الاسم على هذا الحاسب استخدمه ، إذا لم يكن هناك خط بنفس الاسم على الحاسب انتقل إلى الخط الثاني في القائمة (impact) فإذا لم يكن موجوداً أيضاً انتقل إلى الخط الثالث (sans-serif) و إذا لم يكن موجوداً أيضاً ارجع إلى القيمة الافتراضية لعنوان من المستوى الثاني (عادة تكون Arial) . و هذه هي النتيجة التي سوف يخرج بها المتصفح من القاعدة السابقة :

يمكنك وضع أسماء خطوط في القائمة كما تريد ، و هذه الميزة مفيدة في حالة إذا كنت غير متأكد من اسم خط ما على منصة أخرى ، فيمكنك في هذه الحالة وضع جميع الأسماء التي تشك في أنها صحيحة و إذا صادف المتصفح أحدها سيعرض به النص المطلوب . و لكن يجب أن تأخذ في الاعتبار أن المتصفحات تحب أن تكون أسماء الخطوط بالحروف الصغيرة small .

من الجيد أن تستخدم أسماء خطوط عامة كإسم أخير في قائمتك ، و هذه الأسماء هي :

• serif : و هو نوع الخط الذي به ذنابة أو شرطة صغيرة في أعلاه أو أسفله (مثل Times New Roman) .

• sans-serif : و هو الخط الذي ليس به ذنابة (مثل Arial أو Helvetica) .

• cursive : و هو الخط المشبك الذي يشبه الكتابة اليدوية (مثل Comic Sans) .
• fantasy : خط خيالي (مثل Ransom أو Tahoma) .
• monospace : و هو خط أحادي المسافة أي أن كل حرف فيه له نفس حجم الحروف الأخرى و تكون المسافة بين الحروف و بعضها واحدة لا تتغير (مثل Courier) .

لكن المتصفح نتكسيب كوميونيكيتور لا يدعم أنواع الخطوط Cursive و Fantasy .

و إليك المزيد من النصائح حول أسماء الخطوط :

• إذا كان اسم الخط يتكون من أكثر من كلمة واحدة مثل Gill Sans ، ضع حوله علامتي اقتباس في شفرتك :

BODY { font-family: "gill sans", "lucida sans", serif }

• بالنسبة للأنماط المضافة في السطر Inline استخدم علامات اقتباس مفردة :

<P STYLE="font-family: 'gill sans', 'lucida sans', serif">Text goes here.</P>

• إذا كنت تضع عدد من الإعلانات Declarations سوياً في قاعدة صفحة أنماط و كانت font-family بينهم ، اجعلها آخر واحدة فيهم ، فالمتصفح إنترنت إكسبلورر 3 قد يتجاهل قاعدة صفحة الأنماط متعددة الإعلانات بكاملها إذا لم تكن font-family هي الأخيرة في القاعدة :

H2 { color: red; margin: 10px; font-family: times, serif }

الخاصية font-size :

باستخدامك للخاصية font-size يصبح لديك تحكم لا يضاهى في حجم النص ، حيث يصبح تحت يديك عدد غير محدود من أحجام الخطوط لتستعملها في تحجيم نصك كما تشاء .

هناك ثلاث طرق أساسية لتحديد حجم نص ما :

• بالنقاط Points ، أو البكسل Pixels أو وحدات قياس أخرى .
• بالكلمات المفتاحية .
• بقيم النسبة المئوية .

- النقاط points أو البكسل pixels أو وحدات القياس الأخرى ..

صفحات الأنماط تتعرف على العديد من وحدات القياس التي يمكنك استخدامها في تحديد حجم عنصر ما :

النقاط :

P { font-size: 16pt }

هذه القاعدة تخبر المتصفح أن يظهر نص الواصفة <P> بحجم 16 نقطة . و يعتبر حجم النقطة مألوف لمصممي الطباعة ، و هي تشير إلى صندوق خيالي يمتد من آخر الجزء السفلي من الحرف الذي ينزل عن السطر مثل P إلى أول الجزء العلوي من الحرف الذي يصعد أعلى من السطر مثل d .

النقاط هي وسيلة ممتازة لتحديد حجم النص ، و ذلك لأنها تعمل جيداً عبر المتصفحات و المنصات . الشيء الوحيد الذي يجب أن تحترز له هو أن الخطوط تظهر بشكل افتراضي على شاشات الحاسبات الشخصية Pcs أكبر منها على شاشات حاسبات الماكنتوش . و إن كانت هذه المشكلة تمثل عقبة كبيرة لك ، يمكنك استخدام لغة JavaScript لتحديد المنصة التي يعمل عليها الزائر و الوصل إلى ملف صفحة أنماط مختلف تبعاً لنوع المنصة التي يأتي منها الزائر .

النقاط مثل كل وحدات القياس الأخرى تستطيع بها جعل النص صغير أو كبير كما تريد . (هذا المثال كان باستخدام 8 نقاط لكلمة "صغير" و 80 نقطة لكلمة "كبير") .

البكسل :

P { font-size: 20px }

من وجهة نظر تصميم الويب ، البكسل هي وحدة قياس مألوفة و يمكن التنبأ بها نسبياً . و في الواقع فإن أفضل شيء في استخدام وحدة البكسل في تحديد حجم النص هو أن حجم النص سيكون متماثل على المنصات المختلفة ، بينما في وحدات القياس الأخرى فإن النص سيظهر على شاشات الحاسبات الشخصية أكبر مما سيكون عليه على شاشات الماكنتوش . و لكن في المقابل فإن النص المحدد الحجم بالبكسل لن يتم طباعته مطابقاً لما تراه ، و في بعض الأحيان لن يتم طباعته على الإطلاق ، و في أحيان أخرى سيتم طباعته بحروف فائقة الصغر . كذلك في بعض إصدارات المتصفحات لن يكون المستخدمين قادرين على تعديل حجم الخط باستخدام إعدادات المتصفح .

و إذا كانت الوحدتين السابقتين لم يعطياك ما ترغب ، استخدم إحدى الوحدات التالية :

• in اختصار inch أي بوصة .
• cm اختصار centimeter أي سنتيمترات .
• mm اختصار millimeter أو ملليمترات .
• pc اختصار pica أو بيكا .

- الكلمات المفتاحية Keywords :

إذا لم ترغب في استخدام وحدات القياس يمكنك أن تعلن حجم النص باستخدام الكلمات المفتاحية كالتالي :

P { font-size: large }

هناك سبعة كلمات مفتاحية ، و هي مماثلة للقيم العددية التي اعتدنا على رؤيتها مع الواصفة <FONT SIZE> :

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

بهذه القيم فإن المتصفح حر في اختيار حجم الخط المناسب لكل كلمة مفتاحية . على سبيل المثال x-large تظهر بحجم 28 نقطة في المتصفح نتسكيب كومينيكيتور (ويندوز و ماك) ، بينما سيظهر في المتصفح إنترنت إكسبلورر 4 بحجم 24 نقطة (ويندوز و ماك) ، أما في المتصفح إنترنت إكسبلورر 3 فستظهر بحجم 18 (ويندوز 95) .

يمكنك أيضاً أن تستخدم كلمات مفتاحية نسبية مثل :

• smaller
• larger

القيمة smaller تخبر المتصفح أن يعدل حجم النص الحالي و ينزل به درجة في سلم الكلمات المفتاحية . على سبيل المثال إذا كان هناك نص كبير large تم تطبيق السمة smaller عليه فسوف يكون بحجم medium . و بالمثل تكون السمة larger . و لكن احذر فالمتصفح IE 3 لا يدعم هاتين السمتين .

- قيم النسبة المئوية ..

الطريقة الثالثة لتحديد حجم النص هي بتحديد قيمة مئوية للنص مثل :

P { font-size: 15pt }

B { font-size: 300% }

و سوف يقرأها المتصفح هكذا : اجعل كل نص الواصفة <B> أكبر بثلاث مرات من نص الواصفة <P> أي بحجم 45 نقطة . و كما ترى فإن القيم المئوية دائماً مبنية على وجود قيمة موروثة من العنصر الأب . لكن المتصفحات قد تكون في بعض الأحيان مشاكسة بالنسبة للقيم المئوية ، لذا حاول دائماً أن تختبرها .

أليس الاختيار ممتع .. فأخيراً أصبح لدينا حرية التحكم كما نريد في حجم النص ، و ذلك بفضل الخاصية font-size التي تعطينا مدى تحكم غير محدود . كما ترى في هذا المثال :

أ أ أ أ أ أ أ أ أ أ أ أ أ أ أ أ أ أ أ أ

كل حرف أ في هذا المثال أكبر بـ 5 نقاط من الحرف الذي قبله ، بدءاً من حجم 5 نقاط إلى حجم 100 نقطة . حاول أن تفعل ذلك بالهتمل إذا استطعت .

انتهـــــــــــــــــــــــى